<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <h1>The City List Page</h1>
        <table id="city-table" border="1px">
            <!--方式一-->
           <!-- <thead>
               <tr>
                   <th>id</th>
                   <th>city</th>
                   <th>operation</th>
               </tr>
            </thead>-->
           <!-- <tbody>
                <tr>
                    <td colspan="3">Data is loading</td>
                </tr>
            </tbody>-->
        </table>
    </div>
    <script src="js/jquery.min.js"></script><!--固定格式-->
    <script>
        //function f(){}//定义函数
       // f();//js中调用函数
       // $();//jquery中调用函数

        /*方式二*/
       /* $(function (){//页面加载完成以后执行
            let cityTable=$("#city-table");//document.querySelector("#city-table");
            console.log("cityTable",cityTable);
            cityTable.append(
                `<tbody>
                <tr>
                    <td colspan="3">Data is loading</td>
                </tr>
            </tbody>`
            );
        }) */

        /*方式三*/
        var cityColumns=[{title:"id"},{title:"city"},{title:"operation"}];
        $(function (){//页面加载完成以后执行
            let cityTable=$("#city-table");//document.querySelector("#city-table");
            console.log("cityTable",cityTable);
           // cityTable.append(createTHead());
            cityTable.append(createTAll(cityColumns));
            cityTable.append(createTBody(cityTable));

        })
        function  createTAll(cityColumns){
            let thead=$("<thead></thead>");
            let tr=$("<tr></tr>");
            for(let i=0;i<cityColumns.length;i++){
                let th=$("<th></th>");
                th.html(cityColumns[i].title);
                tr.append(th);
            }
            thead.append(tr);
            return thead;

        }
       /* function  createTHead(){
           return ` <thead>
               <tr>
                   <th>id</th>
                   <th>city</th>
                   <th>operation</th>
               </tr>
            </thead>`;
        }*/
        function  createTBody(tableId){
           let cols=tableId.find("thead>tr>th").length;
           return `<tbody>
            <tr>
                <td colspan='${cols}'>Data is loading</td>
            </tr>
            </tbody> `;
        }
    </script>
</body>
</html>